<template>
  <div class="reason__list">
    <div class="reason__item"
         @click="goDetail"
         v-for="(item,index) in list"
         :key="index">
      <div class="reason__count">
        <p class="reason__count-title">{{item.count}}%</p>
        <p class="reason__count-subtitle">七日年化</p>
      </div>
      <div class="reason__info">
        <p class="reason__info-title">{{item.title}}</p>
        <div class="reason__tags">
          <div class="reason__tags-item"
               :class="{'reason__tags-item--red':cindex<2}"
               v-for="(citem,cindex) in item.tags"
               :key="cindex">{{citem}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      list: [{
        count: '3.7530',
        title: '建信现金利货币',
        tags: ['取用灵活', '100元起购', '低风险']
      }, {
        count: '3.6820',
        title: '新华活期添加货币E',
        tags: ['取用灵活', '5万起购', '低风险']
      }, {
        count: '3.6820',
        title: '新华活期添加货币E',
        tags: ['取用灵活', '5万起购', '低风险']
      }, {
        count: '3.6820',
        title: '新华活期添加货币E',
        tags: ['取用灵活', '5万起购', '低风险']
      }, {
        count: '3.6820',
        title: '新华活期添加货币E',
        tags: ['取用灵活', '5万起购', '低风险']
      }, {
        count: '3.6820',
        title: '新华活期添加货币E',
        tags: ['取用灵活', '5万起购', '低风险']
      }]
    }
  },

  components: {

  },
  watch: {

  },
  created () {


  },
  methods: {
    goDetail () {
      this.$router.push({ path: '/reason/detail' })
    }
  },
}
</script>

<style scoped lang="scss">
.reason {
  &__header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  &__list {
    margin-top: 5px;
    background-color: #fff;
  }
  &__item {
    padding: 15px 20px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
  }
  &__count {
    width: 120px;
    text-align: center;
    border-right: 1px solid #f5f5f5;
    &-title {
      color: #e8541e;
      font-size: 24px;
      font-weight: 600;
      line-height: 50px;
    }
    &-subtitle {
      color: #999;
      font-size: 14px;
    }
  }
  &__info {
    padding-left: 20px;
    flex: 1;
    &-title {
      color: #333;
      font-size: 18px;
      line-height: 50px;
    }
  }
  &__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    &-item {
      padding: 2px;
      margin-right: 5px;
      color: #bfbfbf;
      border-color: #bfbfbf;
      border-style: solid;
      border-width: 1px;
      font-size: 10px;
      &--red {
        color: #e8541e;
        border-color: #e8541e;
      }
    }
  }
}
</style>
